<template>
  <a-card
    class="folder-content ax_plain_card"
    :bordered="false"
    @drop="drop"
    @dragover="dragover"
    @contextmenu="rootContextmenu"
  >
    <Tool></Tool>
    <div style="height: calc(100% - 60px)">
      <template v-if="mode === 'card'">
        <Card></Card>
      </template>
      <template v-else>
        <Table></Table>
      </template>
    </div>
    <FooterVue />
  </a-card>
</template>

<script setup lang="ts">
import { fileConversion } from '@/utils/file/file';
import { rootContextmenu } from '../data/contextmenu';
import { currentPath, mode } from '../data/data';

import { uploadFiles } from '@/api/modules/tool/file/file';
import { loadPath } from '../data/action';
import Table from './subnodes/Table.vue';
import Card from './subnodes/card/Card.vue';
import FooterVue from './subnodes/footer/Footer.vue';
import Tool from './subnodes/tool/Tool.vue';

const dragover = (e: DragEvent) => {
  e.preventDefault();
};

const drop = async (e: DragEvent) => {
  const files = await fileConversion(e);
  await uploadFiles({
    files,
    root: currentPath.value,
  });
  loadPath();
};
</script>

<style lang="scss" scoped>
.folder-content {
  flex: 1;
  height: 100%;
}
</style>
